<!--
 * @FileDescription: 客户分布-详情
 * @Author: luyaj
 * @Date: 2021-12-25 12:28:20
 * @LastEditors: luyaj
 * @LastEditTime: 2022-06-11 22:12:55
-->
<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :footer="null"
    switchFullscreen
    @cancel="visible = false">

    <a-row>
      <a-col span="18">
        <detail-list :col="3" title="客户信息">
          <detail-list-item term="客户姓名">{{customer.custName}}</detail-list-item>
          <detail-list-item term="联系电话">{{customer.telNum}}</detail-list-item>
          <detail-list-item term="业务负责人">{{customer.createName}}</detail-list-item>
          <detail-list-item term="成交时间">{{customer.createTime}}</detail-list-item>
          <detail-list-item term="审核时间">{{order.auditTime}}</detail-list-item>
          <detail-list-item term="审核人">{{order.auditUser}}</detail-list-item>
          <detail-list-item term="合同款">{{order.contractAmount}}</detail-list-item>
          <detail-list-item term="发货时间">{{order.sendTime}}</detail-list-item>
          <detail-list-item term="发货人">{{order.sendUser}}</detail-list-item>
        </detail-list>
        <detail-list :col="3" title="设备信息">
          <detail-list-item term="站点名称">{{site.siteName}}</detail-list-item>
          <detail-list-item term="现场负责人">{{site.fitter}}</detail-list-item>
          <detail-list-item term="联系电话">{{site.siteLeaderTel}}</detail-list-item>
          <detail-list-item term="系统账户">{{site.sysAccount}}</detail-list-item>
          <detail-list-item term="现场操作人">{{site.fitter}}</detail-list-item>
          <detail-list-item term="联系电话">{{site.fitTel}}</detail-list-item>
          <detail-list-item term="刷卡机数量">{{site.posNum}}</detail-list-item>
          <template v-if="deviceList.length > 0">
            <div v-for="(device, i) in deviceList" :key="'device'+i">
              <detail-list-item term="机型">{{device.machineType}}</detail-list-item>
              <detail-list-item term="设备名称">{{device.deviceName}}</detail-list-item>
              <detail-list-item term="设备号">{{device.machineCode}}</detail-list-item>
              <detail-list-item term="摄像头ip1">{{device.cameraIpOne}}</detail-list-item>
              <detail-list-item term="摄像头ip2">{{device.cameraIpTwo}}</detail-list-item>
              <detail-list-item term="打印机ip">{{device.printerIp}}</detail-list-item>
            </div>
          </template>
        </detail-list>
      </a-col>

      <a-col span="6">
        <detail-list :col="3" title="款项详情">
          <detail-list-item term="合同款">{{order.contractAmount}}</detail-list-item>
          <detail-list-item term="预付款">{{order.deposit}}</detail-list-item>
          <detail-list-item term="尾款">{{order.balancePayment}}</detail-list-item>
        </detail-list>
        <detail-list :col="3" title="付款凭证">
          <div v-if="order.depositList">
            <img class="image" v-for="(item, index) in order.depositList" :src="item.picUrl" :preview="0" :key="'img' + index" />
          </div>
          <span v-else>暂无凭证</span>
        </detail-list>
      </a-col>
    </a-row>
    <a-divider dashed />

    <a-row>
      <a-col span="18">
        <detail-list :col="1" title="现场照片">
          <div v-if="site.sitePicList">
            <img class="image" v-for="(item, index) in site.sitePicList" :src="item.picUrl" :preview="0" :key="'img' + index" />
          </div>
          <span v-else>暂无图片</span>
        </detail-list>
      </a-col>
      <a-col span="6">
        <detail-list :col="3" title="现场视频">
          <div v-if="site.siteVideoList">
            <video class="video" v-for="(item, index) in site.siteVideoList" :src="item.videoUrl" controls="controls" :key="'video' + index">您的浏览器不支持 video 标签</video>
          </div>
          <span v-else>暂无视频</span>
        </detail-list>
      </a-col>
    </a-row>
    <a-divider dashed />
    
    <a-row>
      <a-col span="12">
        <detail-list :col="2" title="收货信息">
          <detail-list-item term="收货人">{{order.receiver}}</detail-list-item>
          <detail-list-item term="联系电话">{{order.receiverTel}}</detail-list-item>
          <detail-list-item  term="套餐机型">{{goodsMeal === null ? '' : goodsMeal.mealName}}</detail-list-item>
          <detail-list-item term="详细地址">{{order.receiverAddress}}</detail-list-item>
          <detail-list-item term="备注">{{order.orderRemark == null ? '' : order.orderRemark}}</detail-list-item>
        </detail-list>
      </a-col>
      <a-col span="12">
        <detail-list :col="1" title="物流信息">
          <detail-list-item term="物流公司">{{order.express==1?'顺丰':'其他'}}</detail-list-item>
          <detail-list-item term="物流单号">{{order.expressNumber}}</detail-list-item>
          <detail-list-item term="物流状态">
            <a-timeline reverse v-if="order.routes" class="routes">
              <a-timeline-item v-for="item in order.routes" :key="item.opCode + item.acceptTime">{{item.remark}}</a-timeline-item>
            </a-timeline>
            <span v-else>暂无</span>
          </detail-list-item>
        </detail-list>
      </a-col>
    </a-row>
    <a-divider dashed />
  </j-modal>
</template>

<script>
  import { getAction } from '@/api/manage' 
  import DetailList from '@/components/tools/DetailList'
  const DetailListItem = DetailList.Item

  export default {
    name: 'BizSiteDetailModal',
    components: {
      DetailList,
      DetailListItem
    },
    data () {
      return {
        title: '站点详情',
        width: '80%',
        visible: false,
        order: {},
        customer: {}, // 客户
        goodsMeal: {}, // 套餐
        site: {},
        deviceList: [],
        url: {
          queryById: '/web/bizCustOrder/queryDetailBySiteId'
        },
      }
    },
    methods: {
      open (record) {
        this.getData(record.id)
        this.visible = true
      },
      getData(siteId) {
        getAction(this.url.queryById, { siteId: siteId }).then(res => {
          if (res.success) {
            console.log(res.result)
            let order = res.result.order
            this.order = order
            this.customer = order.customer
            this.goodsMeal = order.goodsMeal
            this.site = res.result.site
            this.deviceList = res.result.site.deviceList
            this.$previewRefresh() // vue-photo-preview插件中解决预览失效的问题
          }
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .image {
    height: 40px;
    width: 40px;
    margin-right: 5px;
    cursor: pointer;
  }
  .video {
    height: 100px;
    width: 200px;
    margin-right: 5px;
  }
  #map1 {
    height: 350px;
    width: 100%;
    .amap-marker-label{
      border: 0;
      background-color: transparent;
    }
    .info{
      position: relative;
      margin:0;
      top: 0;
      right: 0;
      min-width: 0;
    }
  }
  .routes {
    height: 200px;
    overflow-y: scroll;
    padding-top: 10px;
  }
</style>